<template>
  <div class="map-wrapper">
    <div id="map" class="map"></div>
    <el-form class="search-form" :inline="true" :model="searchForm">
      <el-input v-model="searchForm.keyword" placeholder="请输入搜索关键词"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form>
    <!-- 使用 TencentMap 组件 -->
    <TencentMap></TencentMap>
    <!-- 使用 mapContainer 组件 -->
    <!-- <mapContainer></mapContainer> -->
  </div>
</template><template>

  <div class="map-wrapper">
    <div id="map" class="map"></div>
    <el-form class="search-form" :inline="true" :model="searchForm">
      <el-input v-model="searchForm.keyword" placeholder="请输入搜索关键词"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form>
    <!-- 使用 TencentMap 组件 -->
    <TencentMap></TencentMap>
    <!-- 使用 mapContainer 组件 -->
    <!-- <mapContainer></mapContainer> -->
  </div>
</template>

<script>
// 引入 TencentMap 组件
import TencentMap from './components/TencentMap.vue';

export default {
  name: 'map',
  components: {
    // 注册 TencentMap 组件
    TencentMap,
  },
  data() {
    return {
      map: null,
      searchForm: {
        keyword: ''
      },
      markers: [],
      searchService: null, // 用于存储搜索服务实例
      placeSearch: null // 用于存储周边搜索服务实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      const center = new qq.maps.LatLng(40.13676049054721, 116.20843011426518);
      this.map = new qq.maps.Map(document.getElementById('map'), {
        center,
        zoom: 13
      });

      // 初始化搜索服务
      this.searchService = new qq.maps.SearchService({
        complete: (results) => {
          this.handleSearchResults(results);
        }
      });

      // 初始化周边搜索服务
      this.placeSearch = new qq.maps.PlaceSearch({
        complete: (results) => {
          this.handleSearchResults(results);
        }
      });

      // 封装创建图标的逻辑
      const createIcon = () => {
        const anchor = new qq.maps.Point(6, 6);
        const size = new qq.maps.Size(24, 24);
        const origin = new qq.maps.Point(0, 0);
        return new qq.maps.MarkerImage(
            'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif',
            size,
            origin,
            anchor
        );
      };

      const icon = createIcon();

      const marker = new qq.maps.Marker({
        icon,
        map: this.map,
        position: this.map.getCenter(),
      });

      // 使用箭头函数绑定 this
      qq.maps.event.addListener(this.map, 'click', (event) => this.handleMapClick(event));
    },

    /**
     * 处理地图点击事件
     * @param {Object} event - 地图点击事件对象
     */
    handleMapClick(event) {
      if (!this.marker) {
        // 如果 marker 不存在，创建一个新的 marker
        this.marker = new qq.maps.Marker({
          position: event.latLng,
          map: this.map
        });
        return;
      }
      // 如果 marker 已存在，更新其位置
      this.marker.setPosition(event.latLng);
    },

    /**
     * 搜索功能
     */
    search() {
      const keyword = this.searchForm.keyword;
      if (keyword) {
        // 使用周边搜索服务
        this.placeSearch.searchNearBy(keyword, this.map.getCenter(), 1000); // 1000米范围内的搜索
      }
    },

    /**
     * 处理搜索结果
     * @param {Object} results - 搜索结果对象
     */
    handleSearchResults(results) {
      this.clearMarkers();
      if (results.detail && results.detail.pois) {
        results.detail.pois.forEach(poi => {
          const coord = new qq.maps.LatLng(poi.latLng.lat, poi.latLng.lng);
          const marker = new qq.maps.Marker({
            position: coord,
            map: this.map
          });
          this.markers.push(marker);
        });
      }
    },

    /**
     * 清除地图上的所有标记
     */
    clearMarkers() {
      this.markers.forEach(marker => {
        marker.setMap(null);
      });
      this.markers = [];
    }
  }
};
</script>

<style scoped>
.map-wrapper {
  position: relative;
}

.map {
  width: 100%;
  height: 100vh; /* 修改为100vh实现全屏显示 */
}

.search-form {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>


<script>
// 引入 TencentMap 组件
import TencentMap from './components/TencentMap.vue';

export default {
  name: 'map',
  components: {
    // 注册 TencentMap 组件
    TencentMap,
  },
  data() {
    return {
      map: null,
      searchForm: {
        keyword: ''
      },
      markers: [],
      searchService: null // 用于存储搜索服务实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      const center = new qq.maps.LatLng(40.13676049054721, 116.20843011426518);
      this.map = new qq.maps.Map(document.getElementById('map'), {
        center,
        zoom: 13
      });

      // 初始化搜索服务
      this.searchService = new qq.maps.SearchService({
        complete: (results) => {
          this.handleSearchResults(results);
        }
      });

      // 封装创建图标的逻辑
      const createIcon = () => {
        const anchor = new qq.maps.Point(6, 6);
        const size = new qq.maps.Size(24, 24);
        const origin = new qq.maps.Point(0, 0);
        return new qq.maps.MarkerImage(
            'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif',
            size,
            origin,
            anchor
        );
      };

      const icon = createIcon();

      const marker = new qq.maps.Marker({
        icon,
        map: this.map,
        position: this.map.getCenter(),
      });

      // 使用箭头函数绑定 this
      qq.maps.event.addListener(this.map, 'click', (event) => this.handleMapClick(event));
    },

    /**
     * 处理地图点击事件
     * @param {Object} event - 地图点击事件对象
     */
    handleMapClick(event) {
      if (!this.marker) {
        // 如果 marker 不存在，创建一个新的 marker
        this.marker = new qq.maps.Marker({
          position: event.latLng,
          map: this.map
        });
        return;
      }
      // 如果 marker 已存在，更新其位置
      this.marker.setPosition(event.latLng);
    },

    /**
     * 搜索功能
     */
    search() {
      const keyword = this.searchForm.keyword;
      if (keyword) {
        // 调用腾讯地图的搜索服务
        this.searchService.search(keyword);
      }
    },

    /**
     * 处理搜索结果
     * @param {Object} results - 搜索结果对象
     */
    handleSearchResults(results) {
      this.clearMarkers();
      if (results.detail && results.detail.pois) {
        results.detail.pois.forEach(poi => {
          const coord = new qq.maps.LatLng(poi.latLng.lat, poi.latLng.lng);
          const marker = new qq.maps.Marker({
            position: coord,
            map: this.map
          });
          this.markers.push(marker);
        });
      }
    },

    /**
     * 清除地图上的所有标记
     */
    clearMarkers() {
      this.markers.forEach(marker => {
        marker.setMap(null);
      });
      this.markers = [];
    }
  }
};
</script>

<style scoped>
.map-wrapper {
  position: relative;
}

.map {
  width: 100%;
  height: 100vh; /* 修改为100vh实现全屏显示 */
}

.search-form {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>
